<template>
    <el-autocomplete
        autosize
        collapse-tags
        collapse-tags-tooltip
        v-model.trim="state"
        :fetch-suggestions="querySearch"
        popper-class="my-autocomplete"
        placeholder="请选择"
        class="width_100"
        clearable
    >
      <template #default="{ item }">
        <div class="value">{{ item.value }}</div>
        <span class="link">{{ item.link }}</span>
      </template>
    </el-autocomplete>
  </template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Edit } from '@element-plus/icons-vue'

const props = defineProps({
    list: {
        type: Array,
        default: () => {
            return []
        }
    },
    value: {
        type: String,
        default: ''
    }
})


const state = ref(props.value)


const querySearch = (queryString: string, cb: any) => {
    const results = queryString
        ? props.list.filter(createFilter(queryString))
        : props.list
    // call callback function to return suggestion objects
    cb(results)
}
const createFilter = (queryString: any) => {
    return (restaurant: any) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}

const handleIconClick = (ev: Event) => {
    console.log(ev)
}

</script>

<style>
.my-autocomplete li {
    line-height: normal;
    padding: 7px;
}

.my-autocomplete li .name {
    text-overflow: ellipsis;
    overflow: hidden;
}

.my-autocomplete li .addr {
    font-size: 12px;
    color: #b4b4b4;
}

.my-autocomplete li .highlighted .addr {
    color: #ddd;
}
</style>
